<template>
	<view>
		<view class="itemHeader">
			<view class="orderTitle">
				<image class="image" v-if="isSingle" :src="getImg" alt="" />
				<image class="image" v-else src="../../../static/img/logo/mili.svg" alt="" />
				<text style="margin-left: 20rpx;">{{ getTitle }}</text>
			</view>
			<slot name="status" />
		</view>

		<view class="goodContent" @click="checkDetail">
			<view v-if="isSingle">
				<image class="goodImg image" v-for="(good, index) of Object.values(item.data)[0].goods" :src="good.cover"
					alt="" :key="index" style="width: 160rpx; height: 160rpx" />
			</view>
			<view v-else class="imgs">
				<image v-for="(img, index) of getImgs" :key="index" :src="img" class="goodImg" alt="good"
					style="width: 160rpx; height: 160rpx" />
			</view>
			<view class="title" v-if="isSingle">
				{{ formateTitle }}
			</view>

			<view class="info">
				<view class="price"><span class='span' >¥</span>{{ item.price }}</view>
				<view class="count">共{{ item.count }}件</view>
			</view>
		</view>
		<slot name="btn" />
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			item: {
				type: Object,
				default () {
					return {};
				},
			},
		},
		data() {
			return {};
		},
		methods: {
			checkDetail() {
				// this.$router.push({
				//   path: `/my/order_detail`,
				//   query: {
				//     i: this.item.i,
				//   },
				// });
				console.log('checkDetail')
				uni.navigateTo({
					url: `/pages/my/order/OrderDetail?i=${this.item.i}`,
					fail(msg) {
						console.log('msg', msg);
					}
				})
			},
		},
		computed: {
			getTitle() {
				if (Object.keys(this.item.data).length === 1) {
					return Object.values(this.item.data)[0].info.shopName;
				} else {
					return "咪狸商城";
				}
			},
			getImg() {
				return Object.values(this.item.data)[0].info.shopLogo;
			},
			isSingle() {
				return Object.keys(this.item.data).length === 1;
			},
			formateTitle() {
				let title = Object.values(Object.values(this.item.data)[0].goods)[0]
					.title;
				if (title.length <= 20) return title;
				return title.slice(0, 20) + "...";
			},
			getImgs() {
				let imgs = [];
				for (let shop in this.item.data) {
					for (let good in this.item.data[shop].goods) {
						imgs.push(this.item.data[shop].goods[good].cover);
					}
				}
				return imgs;
			},
		},
		created() {},
	};
</script>
<style lang="scss" scoped>
	.itemHeader {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.itemHeader .image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}

	.orderTitle {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		line-height: 100%;
	}

	.goodImg {
		border-radius: 20rpx;
		flex-shrink: 0;
		/* #ifdef MP */
		margin-right: 10rpx;
		/* #endif */
	}



	.goodContent {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* #ifdef H5 */
		gap: 10rpx;
		/* #endif */
		margin-top: 20rpx;

	}

	.title {
		font-size: 32rpx;
	}

	.info {
		min-width: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: right;
		text-align: right;
	}

	.price {
		font-size: 34rpx;
		font-weight: 550;
	}

	.price > .span {
		font-size: 28rpx;
	}

	.count {
		font-size: 30rpx;
		color: gray;
	}



	.imgs {
		display: flex;
		flex-direction: row;
		/* #ifdef H5 */
		gap: 10rpx;
		/* #endif */
		width: 100%;
		overflow-x: scroll;
	}
</style>
